<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文章详情</title>
  <!-- Bootstrap 5 CSS -->
  <link href="../css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome 图标库 -->
  <link rel="stylesheet" href="../css/all.min.css">
  <style>
    :root {
      --primary-color: #4361ee;
      --secondary-color: #3f37c9;
      --accent-color: #4895ef;
      --light-color: #f8f9fa;
      --dark-color: #212529;
      --text-color: #495057;
      --muted-color: #6c757d;
    }

    body {
      background-color: #f5f7ff;
      color: var(--text-color);
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      line-height: 1.8;
    }

    .header {
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      padding: 15px 0;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .back-btn {
      color: white;
      font-size: 1.2rem;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background-color 0.3s;
    }

    .back-btn:hover {
      background-color: rgba(255,255,255,0.2);
    }

    .header-title {
      font-weight: 600;
      font-size: 1.1rem;
      margin: 0;
      text-align: center;
      flex: 1;
    }

    .action-btn {
      color: white;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background-color 0.3s;
    }

    .action-btn:hover {
      background-color: rgba(255,255,255,0.2);
    }

    .article-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px 15px;
    }

    .article-card {
      background-color: white;
      border-radius: 15px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      overflow: hidden;
      margin-bottom: 30px;
    }

    .article-cover {
      width: 100%;
      height: 220px;
      object-fit: cover;
    }

    .article-content {
      padding: 25px;
    }

    .article-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--dark-color);
      margin-bottom: 15px;
      line-height: 1.4;
    }

    .article-meta {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      font-size: 14px;
      color: var(--muted-color);
    }

    .author-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
      object-fit: cover;
    }

    .meta-text {
      flex: 1;
    }

    .author-name {
      font-weight: 500;
      color: var(--dark-color);
      margin-right: 10px;
    }

    .article-date {
      margin-right: 15px;
    }

    .article-views {
      display: inline-flex;
      align-items: center;
    }

    .article-views i {
      margin-right: 5px;
      font-size: 12px;
    }

    .article-body {
      font-size: 16px;
      color: var(--text-color);
    }

    .article-body p {
      margin-bottom: 20px;
    }

    .article-body img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin: 15px 0;
      display: block;
    }

    .article-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 25px 0;
    }

    .tag {
      background-color: rgba(67, 97, 238, 0.1);
      color: var(--primary-color);
      padding: 5px 12px;
      border-radius: 15px;
      font-size: 13px;
    }

    .article-actions {
      display: flex;
      justify-content: space-around;
      padding: 15px 0;
      border-top: 1px solid #f0f0f0;
      margin-top: 20px;
    }

    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--muted-color);
      font-size: 13px;
    }

    .action-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      margin-bottom: 5px;
      transition: all 0.3s;
    }

    .action-item:hover .action-icon {
      background-color: rgba(67, 97, 238, 0.1);
      color: var(--primary-color);
    }

    .like.active .action-icon {
      color: #ff4d4f;
    }

    .comment-section {
      background-color: white;
      border-radius: 15px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      padding: 20px;
      margin-bottom: 30px;
    }

    .section-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--dark-color);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
    }

    .section-title i {
      margin-right: 8px;
      color: var(--primary-color);
    }

    .comment-form {
      margin-bottom: 25px;
    }

    .comment-input {
      width: 100%;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 12px 15px;
      resize: none;
      min-height: 80px;
      margin-bottom: 10px;
    }

    .comment-input:focus {
      border-color: var(--primary-color);
      outline: none;
      box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.1);
    }

    .submit-btn {
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      border: none;
      padding: 8px 20px;
      border-radius: 8px;
      font-weight: 500;
      float: right;
      transition: all 0.3s;
    }

    .submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 10px rgba(67, 97, 238, 0.2);
    }

    .comment-list {
      margin-top: 30px;
    }

    .comment-item {
      display: flex;
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #f5f5f5;
    }

    .comment-item:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    .comment-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 12px;
      object-fit: cover;
    }

    .comment-content {
      flex: 1;
    }

    .comment-author {
      font-weight: 500;
      color: var(--dark-color);
      margin-bottom: 5px;
    }

    .comment-text {
      font-size: 15px;
      margin-bottom: 8px;
    }

    .comment-meta {
      display: flex;
      font-size: 13px;
      color: var(--muted-color);
    }

    .comment-time {
      margin-right: 15px;
    }

    .comment-like {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .comment-like i {
      margin-right: 5px;
      font-size: 12px;
    }

    .comment-like.active {
      color: #ff4d4f;
    }

    .footer {
      text-align: center;
      padding: 20px 0;
      color: var(--muted-color);
      font-size: 13px;
      background-color: white;
    }

    @media (max-width: 576px) {
      .article-cover {
        height: 180px;
      }

      .article-content {
        padding: 20px;
      }

      .article-title {
        font-size: 1.3rem;
      }

      .article-body {
        font-size: 15px;
      }

      .comment-section {
        padding: 15px;
      }
    }
  </style>
</head>
<body>
<!-- 顶部标题栏 -->
<div class="header">
  <div class="container">
    <div class="header-content">
      <a href="javascript:history.back()" class="back-btn">
        <i class="fas fa-arrow-left"></i>
      </a>
      <h1 class="header-title">文章详情</h1>
      <!--<div class="action-btn">
        <i class="fas fa-share-alt"></i>
      </div>-->
    </div>
  </div>
</div>

<!-- 文章内容 -->
<div class="article-container">
  <div class="article-card">
    <!--<img src="https://picsum.photos/800/400" alt="文章封面" class="article-cover">-->

    <div class="article-content">
      <h1 class="article-title">智能诊疗，让健康关怀触手可及！</h1>

      <div class="article-meta">
        <img src="../image/customer.jpg" alt="作者头像" class="author-avatar">
        <div class="meta-text">
          <span class="author-name">棍子老师</span>
          <span class="article-date">2025-06-12</span>
          <span class="article-views">
            <i class="far fa-eye"></i> 50浏览
          </span>
        </div>
      </div>

      <div class="article-body">
        <p>周末清晨，陈先生从睡梦中醒来，腹部隐隐传来的胀痛感，就像有人用柔软的棉带在轻轻缠绕，虽不尖锐，却持续不断。本以为忍一忍就能过去，可刚起身，一阵恶心翻涌上来，他踉跄着冲进卫生间干呕了几下，什么也没吐出来。双腿发软地回到床上，额角沁出细密的冷汗，连喝口水的力气都提不上。望向窗外阴沉的天空，再想到医院里冗长的候诊队伍，陈先生满心无奈。</p>

        <p>根据《中国常见消化系统疾病流行病学白皮书》，急性胃肠炎在门急诊消化系统疾病中占比高达 30%，而胃肠型感冒作为其中的常见类型，在季节交替和夏季频发。每当此时，各大医院肠道门诊总是人满为患，患者平均候诊时间超过 2 小时。像陈先生这样虚弱的患者，在拥挤嘈杂的医院环境里，不仅要忍受身体的不适，还面临交叉感染的风险。</p>

        <p>正犯愁时，他突然想起朋友推荐过的智能医疗平台。颤抖着拿起手机打开 APP，屏幕上跳出提示：“请描述您的不适症状。” 陈先生缓慢输入：“肚子胀痛、恶心干呕，浑身没劲。”很快，AI 医生的询问弹出：“症状从什么时候开始的？发病前是否食用生冷、油腻食物？有无发热、头晕？” 陈先生一一作答。系统紧接着追问排便情况、是否畏寒，还自动调取了他的健康档案。短短 5 分钟，诊断结果显示：胃肠型感冒，由饮食不当引起。</p>

        <p>同时，系统给出详细治疗方案：“首先，您需要充分休息，减少体力消耗，让胃肠也能得到充分的放松，这有助于身体恢复元气，增强对抗疾病的能力。在饮食方面，建议您这几天以清淡、易消化的流食或半流食为主，比如小米粥、山药粥、蔬菜瘦肉汤面都是不错的选择，它们既能补充能量，又不会给肠胃增添过多负担；避免食用辛辣、油腻、生冷的食物，以免刺激肠胃。水分补充也至关重要，每小时饮用 200 毫升温水，也可以适当喝一些淡盐水，维持体内电解质平衡。</p>

        <p>从药物治疗来看，鉴于您目前恶心症状较为明显，可服用多潘立酮缓解，成人一次 1 片（10mg），一日 3 次，记得在饭前 15 - 30 分钟服用 。同时，搭配藿香正气软胶囊调理肠胃，一次 2 - 4 粒，一日 2 次。</p>

        <p>若后续出现腹泻，可服用蒙脱石散止泻，它能覆盖保护消化道黏膜。如果出现发热症状，体温在 38.5℃以下时，建议采用湿毛巾擦拭额头、腋窝等部位的物理降温方法；若体温超过 38.5℃，可遵医嘱服用对乙酰氨基酚等退烧药。若症状持续不缓解或出现高热、脱水等严重情况，请及时就医。”</p>

        <p>看着手机上的诊断结果，陈先生心里还是有些犯嘀咕，毕竟是关乎身体健康的大事。他注意到界面上有个 “联系后台医生” 的选项，便点击了进去。几秒钟后，一位穿着白大褂的医生出现在对话框中，亲切地说道：“陈先生您好，我是平台的值班医生，看到 AI 系统给您的诊断结果了，我这边又重新审核了您输入的症状信息和健康档案数据，诊断结果是准确的，治疗方案也很合适，您可以放心购药。如果在服药过程中有任何问题，随时可以联系我们。”</p>
        <p>得到医生的确认后，陈先生这才放下心来，点击确认购药。智能医疗平台与同城快递系统迅速联动。20 分钟不到，骑手就将药品和电解质冲剂送到家门口。服药休息几小时后，陈先生腹部的胀痛明显减轻，恶心感也消退不少。他感叹道：“以前要是遇到这种情况，得强撑着去医院挂号、排队、检查，折腾大半天。现在躺在床上聊几句，还有专业医生帮忙把关，问题就解决了，太方便了！”如今，这种便捷服务已逐渐普及。</p>
        <p>在杭州，超 80% 的社区卫生服务中心接入智能医疗系统，与连锁药房、快递企业合作，打造 “在线问诊 + 极速送药” 服务网络。数据显示，该模式让普通感冒、胃肠型感冒等常见疾病的患者平均就医时间从 4 小时缩短至 40 分钟，患者满意度高达 92%。</p>
        <p>随着 5G 与物联网技术发展，智能医疗系统持续升级。除了精准模拟医患对话的问诊模式，还能结合智能手环、体脂秤等设备采集的健康数据，提供更个性化的健康建议。它就像 24 小时在线的私人医生，让轻病患者足不出户就能享受专业、高效的医疗服务。或许在不久的将来，头疼脑热、轻微肠胃不适都无需再奔波医院。智能医疗与快递系统的深度融合，将为我们筑牢健康防线，让关怀随时相伴，让每一个被病痛困扰的时刻，都能迎来温暖曙光。</p>

      </div>

      <div class="article-tags">
        <span class="tag">Ai医疗</span>
        <span class="tag">智能问诊</span>
        <span class="tag">流行病学</span>
        <span class="tag">医疗平台</span>
      </div>

      <div class="article-actions">
        <div class="action-item like">
          <div class="action-icon">
            <i class="far fa-heart"></i>
          </div>
          <span>1.2k</span>
        </div>
        <div class="action-item">
          <div class="action-icon">
            <i class="far fa-star"></i>
          </div>
          <span>收藏</span>
        </div>
        <div class="action-item">
          <div class="action-icon">
            <i class="far fa-comment"></i>
          </div>
          <span>56</span>
        </div>
        <div class="action-item">
          <div class="action-icon">
            <i class="fas fa-share-alt"></i>
          </div>
          <span>分享</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 评论区域 -->
  <div class="comment-section">
    <h3 class="section-title">
      <i class="fas fa-comments"></i> 评论 (14)
    </h3>

    <div class="comment-form">
      <textarea class="comment-input" placeholder="写下你的评论..."></textarea>
      <button type="submit" class="submit-btn">发布评论</button>
      <div style="clear: both;"></div>
    </div>

    <div class="comment-list">
      <div class="comment-item">
        <img src="../image/customer.jpg" alt="用户头像" class="comment-avatar">
        <div class="comment-content">
          <div class="comment-author">飞天的猪</div>
          <div class="comment-text">这篇文章非常实用。</div>
          <div class="comment-meta">
            <span class="comment-time">2025-06-18 14:30</span>
            <span class="comment-like">
                                <i class="far fa-heart"></i> 24
                            </span>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<div class="footer">
  © 2025 智能E生 · 版权所有
</div>

<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="../js/bootstrap.bundle.min.js"></script>

<script>
  // 点赞功能
  document.querySelectorAll('.like, .comment-like').forEach(btn => {
    btn.addEventListener('click', function() {
      this.classList.toggle('active');

      const icon = this.querySelector('i');
      if (this.classList.contains('active')) {
        icon.classList.replace('far', 'fas');

        // 更新计数
        if (this.classList.contains('like')) {
          const countEl = this.querySelector('span');
          const count = parseInt(countEl.textContent.replace(/,/g, '')) + 1;
          countEl.textContent = count.toLocaleString();
        }
      } else {
        icon.classList.replace('fas', 'far');
      }
    });
  });

  // 评论提交
  document.querySelector('.submit-btn').addEventListener('click', function() {
    const commentInput = document.querySelector('.comment-input');
    const commentText = commentInput.value.trim();

    if (commentText) {
      // 这里应该是实际的评论提交逻辑
      console.log('发布评论:', commentText);

      // 模拟添加新评论
      const commentList = document.querySelector('.comment-list');
      const newComment = document.createElement('div');
      newComment.className = 'comment-item';
      newComment.innerHTML = `
                    <img src="https://randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg" alt="用户头像" class="comment-avatar">
                    <div class="comment-content">
                        <div class="comment-author">新用户</div>
                        <div class="comment-text">${commentText}</div>
                        <div class="comment-meta">
                            <span class="comment-time">刚刚</span>
                            <span class="comment-like">
                                <i class="far fa-heart"></i> 0
                            </span>
                        </div>
                    </div>
                `;

      commentList.insertBefore(newComment, commentList.firstChild);
      commentInput.value = '';

      // 更新评论计数
      const commentCount = document.querySelector('.section-title');
      const currentCount = parseInt(commentCount.textContent.match(/\d+/)[0]);
      commentCount.innerHTML = `<i class="fas fa-comments"></i> 评论 (${currentCount + 1})`;

      // 为新评论添加点击事件
      newComment.querySelector('.comment-like').addEventListener('click', function() {
        this.classList.toggle('active');
        const icon = this.querySelector('i');
        if (this.classList.contains('active')) {
          icon.classList.replace('far', 'fas');
        } else {
          icon.classList.replace('fas', 'far');
        }
      });
    }
  });
</script>
</body>
</html>